<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="icon" href="/static/img/favicon.png">
    {% load static %}
    {% block css %}{% endblock %}
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
{#导航#}
<header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="{% url "home" %}">JvHub</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="{% url "home" %}">主站<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="{% url 'all_live' %}">直播<span class="sr-only">(current)</span></a>
                </li>
            </ul>
            <ul class="navbar-nav mr-auto"></ul>
            <ul class="navbar-nav mr-auto"></ul>
            <ul class="navbar-nav mr-auto"></ul>
            <form class="form-inline my-2 my-lg-0" style="left:30%" action="{% url "search_video" %}" method="GET">
                <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search" name="keyword" value="{{ keyword }}">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
            </form>
            <ul class="navbar-nav mr-auto"></ul>
            <ul class="navbar-nav mr-auto"></ul>
            {% if request.user.is_authenticated %}
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                           data-toggle="dropdown" aria-expanded="false">
                            {% if request.session.is_new_message %}
                                <div style="width: 8px;height: 8px;border-radius: 4px;background-color: red;display:inline;float:left"></div>
                            {% endif %}
                            <img src="{{ MEDIA_URL }}{{ user.image }}" alt="..." class="rounded-circle"
                                 style="width: 30px;height: 30px;">

                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="{% url 'user' %}">个人中心</a>
                            {% if request.user.is_certificate %}
                                <a class="dropdown-item" href="{% url 'live_setting' %}">直播中心</a>
                            {% endif %}
                            <a class="dropdown-item" href="{% url 'user_message' %}">我的消息
                                {% if request.session.is_new_message %}
                                    <div style="width: 8px;height: 8px;border-radius: 4px;background-color: red;display:inline-block"></div>
                                {% endif %}
                            </a>
                            <a class="dropdown-item" href="{% url 'user_video' %}">我的视频</a>
                            <a class="dropdown-item" href="{% url 'logout' %}">注销</a>
                        </div>
                    </li>
                </ul>
            {% else %}
                <button type="button" class="btn aui-btn-default" style="color: #007bff" data-toggle="modal"
                        data-target="#login_model" id="login_show_button" data-whatever="@mdo">登录
                </button>
                <ul class="navbar-nav mr-1"></ul>

                <div class="btn-group">
                    <button type="button" class="btn aui-btn-default dropdown-toggle" style="color: #007bff"
                            data-toggle="dropdown" aria-expanded="false">
                        注册
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" type="button" data-toggle="modal" data-target="#register"
                           data-whatever="@mdo">注册</a>
                        <a class="dropdown-item" type="button" data-toggle="modal" data-target="#mail_register"
                           data-whatever="@mdo">邮箱注册</a>
                    </div>
                </div>
                <ul class="navbar-nav mr-auto"></ul>
            {% endif %}
        </div>
    </nav>
    <div>
        <img src="/static/img/head.png" class="d-block w-100" alt="..." style="height: 150px;">
    </div>

    {% if not request.user.is_authenticated %}
        {#登录弹窗#}
        <div class="modal fade" id="login_model" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="login_head">登录 <a href="{% url 'forget_pwd' %}"
                                                                      class="text-decoration-none"
                                                                      style="font-size: 10px" target="_blank">忘记密码</a>
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="login">
                            <div class="form-group">
                                <label for="login_username" class="col-form-label">账户:</label>
                                <input type="text" class="form-control" id="login_username" name="username"
                                       placeholder="输入用户ID或邮箱" autocomplete="off">
                            </div>
                            <div class="form-group">
                                <label for="login_password" class="col-form-label">密码:</label>
                                <input type="password" class="form-control" id="login_password" name="password"
                                       placeholder="输入密码" autocomplete="off">
                            </div>
                            <div class="modal-footer">
                                <div id="login_error" class="text-danger"></div>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary" id="login_button"
                                        onclick="operation('#login','#login_button','{% url 'login' %}','#login_error')">
                                    登录
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {#用户名注册弹窗#}
        <div class="modal fade" id="register" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="re_head">注册</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="re">
                            <div class="form-group">
                                <label for="re_username" class="col-form-label">账户ID:</label>
                                &nbsp;
                                <i class="bi bi-question-circle text-secondary" title="账户（8~16）位，且除下划线外不能含有特殊字符"></i>
                                <input type="text" class="form-control" id="re_username" name="username"
                                       placeholder="输入账户ID"
                                       autocomplete="off">
                            </div>
                            <div class="form-group">
                                <label for="re_password" class="col-form-label">密码:</label>
                                &nbsp;
                                <i class="bi bi-question-circle text-secondary"
                                   title="密码（8~16）位，包括至少一位大写字母，一位小写字母，一个数字，一个特殊字符"></i>
                                <input type="password" class="form-control" id="re_password" name="password"
                                       placeholder="输入密码" autocomplete="off">
                            </div>
                            <div class="form-group">
                                <label for="re_check_password" class="col-form-label">确认密码:</label>
                                <input type="password" class="form-control" id="re_check_password" name="check_password"
                                       placeholder="确认密码" autocomplete="off">
                            </div>
                            <div class="modal-footer">
                                <div id="re_error" class="text-danger"></div>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary" id="re_button"
                                        onclick="operation('#re','#re_button','{% url 're' %}','#re_error')">注册
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {#邮箱注册弹窗#}
        <div class="modal fade" id="mail_register" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="re_email_head">邮箱注册</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="re_email">
                            <div class="form-group">
                                <label for="email" class="col-form-label">邮箱:</label>
                                <input type="text" class="form-control" id="email" name="email" placeholder="输入邮箱"
                                       autocomplete="off">
                            </div>
                            <div class="form-group">
                                <label for="mail_password" class="col-form-label">密码:</label>
                                &nbsp;
                                <i class="bi bi-question-circle text-secondary"
                                   title="密码（8~16）位，包括至少一位大写字母，一位小写字母，一个数字，一个特殊字符"></i>
                                <input type="password" class="form-control" id="mail_password" name="password"
                                       placeholder="输入密码" autocomplete="off">
                            </div>
                            <div class="form-group">
                                <label for="mail_check_password" class="col-form-label">确认密码:</label>
                                <input type="password" class="form-control" id="mail_check_password"
                                       name="check_password"
                                       placeholder="确认密码" autocomplete="off">
                            </div>
                            <div class="modal-footer">
                                <div id="re_email_error" class="text-danger"></div>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary" id="re_email_button"
                                        onclick="operation('#re_email','#re_email_button','{% url 're_email' %}','#re_email_error')">
                                    注册
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</header>

{#主体#}
<div class="body">
    <br>
    {% block nav %}
        <div class="container">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link {% ifequal page_name "home" %}active{% endifequal %}"
                       href="{% url 'home' %}?page_name=home">主页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% ifequal page_name "cartoon" %}active{% endifequal %}"
                       href="{% url 'cartoon' %}?page_name=cartoon">番剧</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% ifequal page_name "tv" %}active{% endifequal %}"
                       href="{% url 'tv' %}?page_name=tv">电视剧</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% ifequal page_name "atv" %}active{% endifequal %}"
                       href="{% url 'atv' %}?page_name=atv">美剧</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">资讯(暂未开放)</a>
                </li>
            </ul>
        </div>
    {% endblock %}
    <p></p>


    {% block content %}
    {% endblock %}
    <div id="toastShowing"></div>
    <!-- footer-->

    {% block footer %}
        <div class="container-fluid" style="background-color: #f6f7f8;height: 400px">
            <hr>
            <br>
            <br>
            <div class="row">
                <div class="col-md-4" align="center">
                    <a id="type_face" href="#" style="text-decoration-line: unset;color: black">关于我们</a>
                    <a href="#" style="text-decoration-line: unset;color: black">联系我们</a>
                    <a href="#" style="text-decoration-line: unset;color: black">用户协议</a>
                    <a href="#" style="text-decoration-line: unset;color: black">友情链接</a>
                    <a href="#" style="text-decoration-line: unset;color: black">加入我们</a>
                </div>
                <div class="col-md-4" align="center">
                    <a href="#" style="text-decoration-line: unset;color: black">侵权申诉</a>
                    <a href="#" style="text-decoration-line: unset;color: black">活动中心</a>
                    <a href="#" style="text-decoration-line: unset;color: black">社区中心</a>
                    <a href="#" style="text-decoration-line: unset;color: black">广告合作</a>
                </div>
                <div class="col-md-4" align="center">
                    <a href="#" style="text-decoration-line: unset;color: black">客户端下载</a>
                    <a href="#" style="text-decoration-line: unset;color: black">新浪微博</a>
                    <a href="#" style="text-decoration-line: unset;color: black">官方微信</a>
                </div>
            </div>
            <hr style="width: 70%">
        </div>
    {% endblock %}

    <footer>
        <script src="/static/js/popper.min.js"></script>
        <script src="/static/js/bootstrap.min.js"></script>
        <script>
            {% if request.user.is_authenticated %}
                const ws_scheme_personal = window.location.protocol === "https:" ? "wss" : "ws";
                const ws_path_personal = ws_scheme_personal + "://" + window.location.host + "/ws/personal/" + '{{ request.user.username }}' + "/";
                const wss = new WebSocket(ws_path_personal);
            {% endif %}
            {% if request.path != '/user/message/' and request.user.is_authenticated %}
                {#     监控是否接收到信息  #}
                wss.onmessage = function (event) {
                    const data = JSON.parse(event.data);
                    {#         toast 删除#}
                    let name = '';
                    if (data['send_nick_name']) {
                        name = data['send_nick_name'];
                    } else {
                        name = data ['sender']
                    }
                    var html = '<div class="position-fixed bottom-0 right-0 p-3" style="z-index:20; right: 0; bottom: 0">\n' +
                        '  <div id="liveToast" class="toast show" style="width: 150rem" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">\n' +
                        '    <div class="toast-header">\n' +
                        '      <a target="_blank" href="/user/message/?recipient_username=' + data['sender'] + ' "><img src="' + data['image'] + '"style="width: 16px;height: 16px;border-radius: 8px" class="rounded mr-2" alt="..."></a>\n' +
                        '      <strong class="mr-auto"><a style="text-decoration:none;color:#6E757D" target="_blank" href="/user/message/?recipient_username=' + data ['sender'] + ' ">' + name + '(' + data['read_num'] + ')</a></strong>\n' +
                        '      <small>' + data['time'] + '</small>\n' +
                        '      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close" onclick="' + "$('#liveToast').remove()" + '">\n' +
                        '        <span aria-hidden="true">&times;</span>\n' +
                        '      </button>\n' +
                        '    </div>\n' +
                        '    <div class="toast-body text-truncate"><a target="_blank" style="text-decoration:none;color:black" href="/user/message/?recipient_username=' + data ['sender'] + ' ">\n' +
                        data['message'] +
                        '    </a></div>\n' +
                        '  </div>\n' +
                        '</div>';
                    $('#toastShowing').html(html);
                    setTimeout(function () {
                        $('#toastShowing').fadeOut(2000);
                    }, 5000)
                };
                $('#toastShowing').html('');
            {% endif %}

            {#        表单ajax异步 #}

            function operation(form_id, submit_button, url, msg_id) {
                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: $(form_id).serialize(),
                    async: true,
                    beforeSend: function (xhr, setting) {
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                        $(submit_button).attr({disabled: "disabled"});
                    },
                    success: function (data) {
                        if (data.status == 'fail') {
                            $(msg_id).html(data.msg);
                        } else if (data.status == 'success') {
                            if (data.msg) {
                                alert(data.msg);
                            }
                            window.location.reload();
                        }
                    },
                    complete: function () {
                        $(submit_button).removeAttr('disabled');
                    },
                });
            }

        </script>

        {% block custom_jss %}
        {% endblock %}
    </footer>
</div>
</body>

</html>